@charset "utf-8";
/* CSS Document */


.page1 { width:100%; height:100%; overflow:hidden; background:url(../images/page1.jpg) no-repeat center; position:relative;}
.logo{ width:106px; height:93px; background:url(../images/logo.png) no-repeat; position:absolute; top:39px; left:58px;}
.page1 .nr{ width:508px; height:268px; position:absolute; top:50%; left:50%; margin-top:-134px; margin-left:-254px;}
.p1_title{ animation:mymove 1.5s; animation-iteration-count:1; animation-fill-mode: forwards; position:relative;  }
.p1_title2{ animation:mymove2 1.5s ; animation-iteration-count:1; animation-fill-mode: forwards; position:relative; margin-top:53px;}
.p1_title img,.p1_title2 img{ margin:0 auto;}		
@keyframes mymove
{
from {left:-100px; opacity:0;}
to {left:0; opacity:1}
}

@keyframes mymove2
{
from {right:-100px; opacity:0;}
to {right:0; opacity:1}
}
.p1_title3{ animation:mymove3 1.5s ; width:132px; height:30px; border:1px solid #fff; margin:0 auto; margin-top:75px; position:relative;}
.p1_title3 a{ transition:all 0.5s; color:#333; display:block; text-align:center; width:126px; height:24px; line-height:24px; background:#fff; font-size:13px; margin:0 auto; margin-top:3px;}
.p1_title3:hover a{ background:#000; color:#fff;}
@keyframes mymove3
{
from { opacity:0;}
to { opacity:1}
}
.shubiao{ animation: dong 0.85s linear 0s alternate infinite;
          -webkit-animation: dong 0.85s linear 0s alternate infinite;  
		  width:22px; height:39px; background:url(../images/shubiao.png) no-repeat;
		  position:absolute; bottom:10px; left:50%; margin-left:-11px;}
		  
@keyframes dong
{
0%{
	  opacity: 0.4;
	  transform: translateY(-15px);
	}
	15%{
	  opacity: 0.65;
	  transform: translateY(-10px);
	}
    25%{
      opacity: 0.8;
	  transform: translateY(-5px);
	}
    50%{
      opacity: 1;
	  transform: translateY(0px);
	}
	75%{
	  opacity: 0.8;
	  transform: translateY(5px);
	}
	85%{
	  opacity: 0.65;
	  transform: translateY(10px);
	}
	100%{
	  opacity: 0.4;
	  transform: translateY(15px);
	}
}
.page2{width:100%; height:100%; overflow:hidden; background:url(../images/page2.jpg) no-repeat center; position:relative;}
.page2 .nr{ width:700px; height:376px; position:absolute; top:50%; left:50%; margin-left:-350px; margin-top:-188px;}
.page2 .nr .tit{ width:280px; height:51px; margin:0 auto; background:url(../images/about.png) no-repeat;}
.page2 .nr p{ font-size:15px; line-height:35px; color:#ffffff; width:700px; height:215px; /* font-family:"幼圆"; */ overflow:hidden; margin-top:100px;}
@font-face {
font-family: 幼圆; /*这里是说明调用来的字体名字*/
src:url(../font/youyuan.ttf); /*这里是字体文件路径*/
}
.xinwen{ width:525px; height:127px; position:absolute; top:50%; left:0; margin-top:-60px; transition:all 1.5s; margin-left:-525px;}
.xinwen .jiantou{ width:25px; height:127px; background:rgba(0,0,0,0.7); position:absolute; right:-24px; font-size:35px; line-height:130px; text-align:center; color:#fff;}
.xinwen .jiantou img{ width:6px; height:11px; position:absolute; top:50%; left:50%; margin-top:-5.5px; margin-left:-3px;}
.xinwen ul li{ overflow:hidden; background:rgba(0,0,0,0.7); width:262px; height:127px; float:left; border-right:1px solid #7e7e7e; padding:15px 25px; box-sizing:border-box; transition:all 0.5s;}
.xinwen ul li h3{ width:220px; height:30px; line-height:25px; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space: nowrap; color:#fff; border-bottom:1px solid #7e7e7e;}
.xinwen ul li p{ margin-top:5px; width:220px; line-height:24px; color:#a3a3a3; font-size:13px; height:50px; overflow:hidden;}
.xinwen ul li:hover{ height:170px; }
.xinwen ul li:hover p{ height:90px;}
.xinwen:hover{ margin-left:0;}
.page3{width:100%; height:100%; overflow:hidden; background:url(../images/page3.jpg) no-repeat center; position:relative;}
.page3 .kuang{ opacity:0; width:445px; height:46px; border:3px solid rgba(255,255,255,0.5); position:absolute; top:50%; right:110px; transition:all 0.5s;
 transform: translate3d(0, 80px, 0); -webkit-transform: translate3d(0px, 80px, 0);
	              -moz-transform: translate3d(0, 80px, 0);
	              -o-transform: translate3d(0, 80px, 0);}
.page3 .kuang a{width:445px; height:46px; text-align:center; line-height:46px; color:#ffffff; display:block; font-size:20px; letter-spacing:2px}
.page3 .kuang:hover{ background:rgba(0,0,0,0.7);}
.page3 .kuang.active{transform: translate3d(0, 0, 0);
	                    /* -webkit-transform: translate3d(0, 0, 0); */
	                    -moz-transform: translate3d(0, 0, 0);
	                    -o-transform: translate3d(0, 0, 0); opacity: 1;}

.page4{width:100%; height:100%; overflow:hidden; background:url(../images/page4.jpg) no-repeat center; position:relative;}
.page4 .nr{ width:1200px; height:100%; margin:0 auto; position:relative;}
.page4 .nr .txt{ width:440px; height:220px; position:absolute; left:117px; top:30%;}
.page4 .nr .txt h3{ opacity:0; width:206px; height:37px; background:url(../images/fx.png) no-repeat; transform: translate3d(0px, 50px, 0); -webkit-transform: translate3d(0px, 50px, 0);
	              -moz-transform: translate3d(0px, 50px, 0);
	              -o-transform: translate3d(0px, 50px, 0);
				  transition: all 1s ease 0s;
			      -webkit-transition: all 1s ease 0s;
				  -moz-transition: all 1s ease 0s;}
.page4 .nr .txt p{opacity:0; font-size:20px; color:#777373; line-height:35px; letter-spacing:7px; margin-top:15px;transform: translate3d(0px, 50px, 0); -webkit-transform: translate3d(0px, 50px, 0);
	              -moz-transform: translate3d(0px, 50px, 0);
	              -o-transform: translate3d(0px, 50px, 0);
				  transition: all 1s ease .2s;
			      -webkit-transition: all 1s ease .2s;
				  -moz-transition: all 1s ease .2s;}
.page4 .nr .txt dl{opacity:0; color:#777373; font-size:20px; line-height:35px; letter-spacing:3.5px; margin-top:2px;transform: translate3d(0px, 50px, 0); -webkit-transform: translate3d(0px, 50px, 0);
	              -moz-transform: translate3d(0px, 50px, 0);
	              -o-transform: translate3d(0px, 50px, 0);
				  transition: all 1s ease .4s;
			      -webkit-transition: all 1s ease .4s;
				  -moz-transition: all 1s ease .4s;}
.page4 .nr .txt i{ font-style:normal; display:block; opacity:0; font-size:30px; color:#777373; margin-left:-100px; 
				  transition: all 1s ease 1s;
			      -webkit-transition: all 1s ease 1s;
				  -moz-transition: all 1s ease 1s;}
.page4 .nr.active .txt h3,.page4 .nr.active p,.page4 .nr.active dl{transform: translate3d(0, 0, 0);
	                    /* -webkit-transform: translate3d(0, 0, 0); */
	                    -moz-transform: translate3d(0, 0, 0);
	                    -o-transform: translate3d(0, 0, 0); opacity: 1;}


.page4 .nr.active .txt .ex1 {
  opacity: 0;
  perspective: 200px;
}
.page4 .nr.active .txt .ex1 span {
  transform: rotateY(-90deg);
  opacity: 0;
}



.page5{width:100%; height:100%; overflow:hidden; background:url(../images/page5.jpg) no-repeat center; position:relative;}
@media screen and (min-width:1200px) and (max-width:1500px){
   .page5{width:100%; height:100%; overflow:hidden; background:url(../images/page_5.jpg) no-repeat center; position:relative;}
}
.page5 a{ width:50%; height:100%; float:right; display:block;}
@font-face {
font-family: aparaj; /*这里是说明调用来的字体名字*/
src:url(../font/aparaj.ttf); /*这里是字体文件路径*/
}
#box1{ border:3px solid #fff; }

.page6{width:100%; height:100%; overflow:hidden; background:url(../images/page6.jpg) no-repeat center; position:relative;}
.page6 .nr{ width:1050px; height:486px; top:50%; left:50%; margin-top:-243px; margin-left:-525px; position:absolute;}
.page6 .nr_left{ width:310px; height:486px; float:left; background:rgba(229,4,4,0.79); padding:0 41px; box-sizing:border-box;}
.page6 .nr_right{ width:740px; height:486px; float:right; background:rgba(255,255,255,0.87);}
.page6 .nr_left h3{ font-size:25px; color:#fff; margin-top:43px; line-height:35px;}
.page6 .nr_left p{ font-size:18px; color:#fff; margin-bottom:40px;}
.page6 .nr_left .input1{ width:225px; height:35px; border-bottom:1px solid #f9c4c4; margin-top:15px;  }
.page6 .nr_left .input1 input{ width:225px; height:35px; font-size:14px; color:#fff; background:none; border:none; line-height:15px;}
.page6 .nr_left .input2{ width:225px; height:60px; border-bottom:1px solid #f9c4c4; margin-top:15px;  }
.page6 .nr_left .input2 textarea{ width:225px; height:60px; font-size:14px; color:#fff; background:none; border:none; line-height:15px;}
input::-webkit-input-placeholder { color:#fff; font-size:14px;}
textarea::-webkit-input-placeholder { color:#fff; font-size:14px;}
.page6 .nr_left .input3{ width:86px; height:25px; margin:25px auto;}
.page6 .nr_left .input3 input{ width:86px; height:25px; font-size:14px; color:#fff; background:none; border:none;}
.page6 .nr_right h3{ font-size:20px; color:#da0502; margin-top:90px; line-height:35px; text-align:center;}
.page6 .nr_right span{ font-size:14px; color:#999; text-align:center; width:575px; height:25px; line-height:25px; margin:0 auto; display:block; margin-top:32px;}
.page6 .nr_right ul{ width:575px; margin:53px auto;}
.page6 .nr_right ul li{ width:185px; height:200px; float:left;}
.page6 .nr_right ul li img{ margin:0 auto;}
.page6 .nr_right ul li p{ font-size:14px; color:#666; text-align:center; margin-top:20px; line-height:25px;}
.footer{ width:100%; height:37px; background:#000; position:fixed; bottom:0; left:0;}
.footer .nr{ width:95%; height:37px; margin:0 auto;}
.footer .nr_left{ width:360px; height:37px; float:left; line-height:37px;}
.footer .nr_left a{ font-size:14px; color:#fff; margin-right:22px; display:block; float:left;}
.footer .nr_left p{ font-size:14px; color:#fff;}
.footer .nr_right{ width:560px; float:right; font-size:14px; color:#fff; line-height:37px;}
.footer .nr_right dl{ width:20px; height:20px; background:url(../images/cnzz.gif) no-repeat; float:right; margin-top:8px;}
 
.ma1{ width:100px; height:100px; margin:20px auto;background:url(../images/ma.png) no-repeat center;}